<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
	response.setContentType("text/html;charset=UTF-8");
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	String path = request.getContextPath();
%>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=0"/>
	<title>抱走宝山报名</title>
	<link rel="stylesheet" href="<%=path%>/css/bootstrap.min.css" />
	<link rel="stylesheet" href="<%=path%>/css/validationEngine.jquery.css" />
	<link rel="stylesheet" type="text/css" href="<%=path%>/css/ylj.css"/>
</head>
<body>
	<div class="bg"></div>
	<div class="pic"><img src="<%=path%>/img/titlex.png"/></div>
	<div class="bd">
	<form action="<%=path%>/user/ad" method="post" id="fo" ENCTYPE="multipart/form-data" >
			<div class="xsa">
				<div class="biao">
					<div class="tiltex">
						<input type="hidden" name="sIndex" value="${param.index}" />
						<input type="hidden" name="openid" value="${opid}" />
						<input type="hidden" name="signType" value="${signType}" />
						<p>姓名</p>
						<p>Name</p>
					</div>
					<div class="dan">
						<input type="text" name="name" value="${updateUser.name }" class="validate[required]"	data-prompt-position="inline"/>
					</div>
				</div>
				<div class="biao">
					<div class="tiltex">
						<p>性别</p>
						<p>Gender</p>
					</div>
					<div class="dan">
						<div class="rao m10px">
							<input type="radio" name="gender" class="xradio validate[required] radio" data-prompt-position="inline" value="M" <c:if test="${updateUser.gender=='M'}">checked</c:if> /><span>男/Man</span>
						</div>
						<div class="rao">
							<input type="radio" name="gender" class="xradio validate[required] radio" data-prompt-position="inline" value="W" <c:if test="${updateUser.gender=='W'}">checked</c:if> /><span>女/Woman</span>
						</div>
					</div>
				</div>
				<div class="biao">
					<div class="tiltex">
						<p>联系电话</p>
						<p>Contact</p>
					</div>
					<div class="dan">
						<input type="text" name="contact" value="${updateUser.contact }" class="validate[required,minSize[11],maxSize[11],custom[phone]]"
							data-prompt-position="inline" />
					</div>
				</div>
				<div class="biao">
					<div class="tiltex">
						<p>国籍</p>
						<p>Country</p>

					</div>
					<div class="dan">
						<select name="country">
							<option value="中国大陆" <c:if test="${updateUser.country=='中国大陆'}">selected="selected"</c:if> >中国大陆</option>
							<option value="中国香港/Hong Kong" <c:if test="${updateUser.country=='中国香港/Hong Kong'}">selected="selected"</c:if> >中国香港/Hong Kong</option>
							<option value="中国澳门/Macau" <c:if test="${updateUser.country=='中国澳门/Macau'}">selected="selected"</c:if> >中国澳门/Macau</option>
							<option value="中华台北/Chinese Taipei" <c:if test="${updateUser.country=='中华台北/Chinese Taipei'}">selected="selected"</c:if> >中华台北/Chinese Taipei</option>
							<option value="其他国家/Other Country" <c:if test="${updateUser.country=='其他国家/Other Country'}">selected="selected"</c:if> >其他国家/Other Country</option>
						</select>
					</div>
				</div>
				<div class="biao">
					<div class="tiltex">
						<p>证件类型</p>
						<p>ID Type</p>
					</div>
					<div class="dan">
						<div class="rao m10px">
							<input type="radio" name="cardType" value="ID"
								class="xradio validate[groupRequired[card]]" data-prompt-position="inline" checked /><span>身份证</span>
						</div>
						<div class="rao m10px">
							<input type="radio" name="cardType" value="H"
								class="xradio validate[groupRequired[card]]" data-prompt-position="inline" /><span>护照</span>
						</div>
					</div>
				</div>
				<div class="biao">
					<div class="tiltex">
						<p>证件号码</p>
						<p>ID Number</p>
					</div>
				    
					<div class="dan">
						<input type="text" placeholder="未满18岁选手请填监护人证件" name="cerNumber"
							value="${updateUser.cerNumber }" class="validate[required,custom[onlyLetterNumber],validate[minSize[7]],validate[maxSize[18]]" data-prompt-position="inline" />
					</div>
				</div>
				<div class="biao">
					<div class="tiltex">
						<p>T恤尺码</p>
						<p>T-shirt Size</p>
					</div>
					<div class="dan">
						
							<select name="tShirt" class="validate[required]" data-prompt-position="inline">
								<option value="S" <c:if test="${updateUser.tShirt == 'S' }">selected="selected"</c:if>>&nbsp;&nbsp;S&nbsp;&nbsp;&nbsp;</option>
								<option value="M" <c:if test="${updateUser.tShirt == 'M' }">selected="selected"</c:if>>&nbsp;&nbsp;M&nbsp;&nbsp;&nbsp;</option>
								<option value="L" <c:if test="${updateUser.tShirt == 'L' }">selected="selected"</c:if>>&nbsp;&nbsp;L&nbsp;&nbsp;&nbsp;</option>
								<option value="XL" <c:if test="${updateUser.tShirt == 'XL' }">selected="selected"</c:if>>&nbsp;&nbsp;XL&nbsp;&nbsp;&nbsp;</option>
								<option value="XXL" <c:if test="${updateUser.tShirt == 'XXL' }">selected="selected"</c:if>>&nbsp;&nbsp;XXL&nbsp;&nbsp;&nbsp;</option>
								<option value="XXXL" <c:if test="${updateUser.tShirt == 'XXXL' }">selected="selected"</c:if>>&nbsp;&nbsp;XXXL&nbsp;&nbsp;&nbsp;</option>
								
							</select>
				
					</div>
				</div>
				<div class="biao">
					<div class="tiltex">
						<p>紧急联系人</p>
						<p>Emergency Contact</p>
					</div>
					<div class="dan">
						<input type="text" name="linkMan" class="validate[required]" data-prompt-position="inline" value="${updateUser.linkMan }" />
					</div>
				</div>
				 <div class="biao">
					<div class="tiltex">
						<p>紧急联系人手机号</p>
						<p>Emergency phone</p>
					</div>
					<div class="dan">
						<input type="text" name="linkPhone" value="${updateUser.linkPhone }" class="validate[required,minSize[11],maxSize[11],custom[phone]]"
							data-prompt-position="inline" />
					</div>
				</div> 
				<div class="biao">
					<div class="tiltex">
						<p>出行方式</p>
						<p>Trip Mode</p>
					</div>
					<div class="dan">
						<div class="rao m10px">
							<input type="radio" name="tripMode" value="sd" class="xradio validate[required] radio" data-prompt-position="inline"
								<c:if test="${updateUser.tripMode=='sd'}">checked="checked"</c:if> /><span>自驾/Self-driving</span>
						</div>
						<div class="rao">
							<input type="radio" name="tripMode" value="pt" class="xradio validate[required] radio" data-prompt-position="inline" <c:if test="${updateUser.tripMode=='pt'}">checked="checked"</c:if> /><span>公共交通/Public
								Transportation</span>
						</div>
					</div>
				</div>
				<div class="biao">
					<div class="tiltex">
						<p>报名组别</p>
						<p>Race Group</p>
					</div>
					<div class="dan">
				<%-- 		<c:if test="${signType=='S' }"> --%>
						<div class="rao m10px">
							<input type="radio" name="raceGroup" value="A"
								class="xradio validate[required] radio" data-prompt-position="inline" <c:if test="${updateUser.raceGroup == 'A' }">checked</c:if> /><span>10公里/km</span>
						</div>
						<div class="rao m10px">
							<input type="radio" name="raceGroup" value="B"
								class="xradio validate[required] radio" data-prompt-position="inline" <c:if test="${updateUser.raceGroup == 'B' }">checked</c:if> /><span>20公里/km</span>
						</div>
					<%-- 	</c:if> --%>
						<div class="rao">
							<input type="radio" name="raceGroup" value="C"
								class="xradio validate[required] radio" data-prompt-position="inline" <c:if test="${updateUser.raceGroup == 'C' }">checked</c:if>  /><span>30公里/km</span>
						</div>
					</div>
				</div>
				<a href="javascript:ww()" class="btu" name="sub" >提交/submit</a>
				<p class="text-center pone">组委会为选手们准备了绿色穿梭巴士</p>
				<p class="text-center ptwo">Free shuttle bus have been prepared
					by committee</p>
			</div>
		</form> 
		</div>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		<script type="text/javascript" src="<%=path%>/js/jquery-2.2.3.min.js" ></script>
		<script type="text/javascript" src="<%=path%>/js/bootstrap.min.js"></script>
		<script type="text/javascript"	src="<%=path%>/js/jquery.validationEngine.js"></script>
		<script type="text/javascript"	src="<%=path%>/js/jquery.validationEngine-zh_CN.js"></script>
	
		<script type="text/javascript">
		//微信jssdk config
		wx.config({
			debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId : '${appid}', // 必填，公众号的唯一标识
			timestamp : '${timestamp}', // 必填，生成签名的时间戳
			nonceStr : '${noncestr}', // 必填，生成签名的随机串
			signature : '${signature}',// 必填，签名，见附录1
			jsApiList : [ 'checkJsApi', //判断当前客户端版本是否支持指定JS接口
			'onMenuShareTimeline', //分享给好友
			'onMenuShareAppMessage', //分享到朋友圈
			'onMenuShareQQ', //分享到QQ
			'onMenuShareWeibo' //分享到微博
			]
		// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
		});
		wx
				.ready(function() { //ready函数用于调用API，如果你的网页在加载后就需要自定义分享和回调功能，需要在此调用分享函数。//如果是微信游戏结束后，需要点击按钮触发得到分值后分享，这里就不需要调用API了，可以在按钮上绑定事件直接调用。因此，微信游戏由于大多需要用户先触发获取分值，此处请不要填写如下所示的分享API
					wx
							.onMenuShareTimeline({ //分享到朋友圈的API  
								title : '抱走宝山挑战赛', // 分享标题
								link : 'http://run.xuanzhen-tech.com/wx_project/user/toRight.html', // 分享链接
								imgUrl : 'http://run.xuanzhen-tech.com/wx_project/img/titlex.png', // 分享图标
								success : function() {
									// 用户确认分享后执行的回调函数
								},
								cancel : function() {
									// 用户取消分享后执行的回调函数
								}
							});
					wx
							.onMenuShareAppMessage({//分享到朋友 
								title : '抱走宝山', // 分享标题
								desc : '抱走宝山挑战赛火热报名中', // 分享描述
								link : 'http://run.xuanzhen-tech.com/wx_project/user/toRight.html', // 分享链接
								imgUrl : 'http://run.xuanzhen-tech.com/wx_project/img/titlex.png', // 分享图标
								type : 'link', // 分享类型,music、video或link，不填默认为link
								dataUrl : '', // 如果type是music或video，则要提供数据链接，默认为空
								success : function() {
									// 用户确认分享后执行的回调函数
								},
								cancel : function() {
									// 用户取消分享后执行的回调函数
								}
							});
				});
		$('document').ready(function() {
			$("#fo").validationEngine();
			$("#subf").click(function() {
				if (list < 2) {
					alert("报名人数不足");
					return false;
				}
			});
		});
		function ww() {
			
				$("#fo").submit();
	
		}
		</script>
</body>
</html>